<template>
  <div class="head">
    <div class="logo">
      <img src="../../../resource/imgs/logo.png">
    </div>
    <div class="right">
      <ul>
        <li>
          <img :src="info.photo||defaultImg" :onerror="header">
        </li>
        <li>
          <span class="userName">{{info.name}}</span>
        </li>
        <li>
          <el-dropdown trigger="click" @command="handleCommand">
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down" style="color:#fff"></i>
              </span>
            <el-dropdown-menu slot="dropdown">

              <el-dropdown-item command="changepwd">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
      </ul>
    </div>
    <el-dialog title="修改密码" :visible.sync="changePwdVisible" size="tiny">
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="原密码" prop="oldpwd">
          <el-input type="password" v-model="form.oldpwd"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newpwd1">
          <el-input type="password" v-model="form.newpwd1"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="newpwd2">
          <el-input type="password" v-model="form.newpwd2"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changePwdVisible = false">取 消</el-button>
        <el-button type="primary" @click="changePwdSub">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import http from "../../assets/js/http";
let reg = new RegExp("^[A-Za-z0-9]+$");
export default {
  data() {
    var validator_old = (rule, value, callback) => {
      if (value.trim() === "") {
        callback(new Error("请输入原密码"));
      } else {
        callback();
      }
    };
    var validator_new1 = (rule, value, callback) => {
      if (value.trim() === "") {
        callback(new Error("请输入新密码"));
      } else if (value.length < 6 || value.length > 16) {
        callback(new Error("密码长度为 6 到 16 个字符!"));
      } else if (!reg.test(value)) {
        callback(new Error("密码只能由英文字母和数字组成!"));
      } else {
        callback();
      }
    };
    var validator_new2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.form.newpwd1) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      defaultImg:require("../../../resource/imgs/header.jpg"),
      info: {},
      form: {
        oldpwd: "",
        newpwd1: "",
        newpwd2: ""
      },
      rules: {
        oldpwd: [
          { validator: validator_old, trigger: 'blur' }          
        ],
        newpwd1: [
          { validator: validator_new1, trigger: 'blur' }          
        ],
        newpwd2: [
          { validator: validator_new2, trigger: 'blur' }
        ],
      },
      changePwdVisible: false,
      header: 'this.src="' + require('../../../resource/imgs/header.jpg') + '"',
    };
  },
  methods: {
    fetchData() {
      this.apiPost("users/myInfo").then(res => {
        this.info = res;
        localStorage.setItem("userName",res.name)
      });
    },
    handleCommand(command) {
      if (command == "changepwd") {
        this.changePwdVisible = true;
      } else if (command == "logout") {
        this.logout();
      }
    },
    logout() {
      axios.post(PATH + "users/logout").then(res => {
        if (res.data.error === 0) {
          this.$router.push("/login");
        }
      });
    },

    changePwdSub() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let data = qs.stringify(this.form);
          axios.post(PATH + "users/changePwd", data).then(res => {
            if (res.data.error) {
              this.$message.error(res.data.msg);
            } else {
              this.$message({
                message: res.data.msg,
                type: "success"
              });
              router.push("/login");
            }
          });
        } else {
          return false;
        }
      });
    }
  },
  created() {
    this.fetchData();
  },
  mixins: [http]
};
</script>
<style scoped>
.head {
  width: 100%;
  height: 60px;
  background-color: #3f9ce2;
  position: relative;
  top: 0;
  left: 0;
}
.head .logo {
  float: left;
  /* margin-top: 7px; */
  margin-left: 40px;
}
.right {
  float: right;
  margin-right: 60px;
  height: 60px;
  line-height: 60px;
}
.right li {
  float: left;
  color: #fff;
  margin: 0 8px;
}
.right li img {
  width: 40px;
  height: 40px;
  border-radius: 40px;
}
.right ul .bell {
  margin-right: 40px;
}
</style>
